<template>
	<view class="footer">
		<view class="footer_item"  :style="'width:'+item_width(index)" @click="change_nav(index)"
		 v-for="(item,index) in footer_nav" :key="index">
		 
			<image :src="index==now_index?item.select_icon:item.icon" mode=""></image>
			<view :class="{'active':index==now_index}">{{item.name}}</view>
			<!--   <view class="circle" v-if="index==1 && user && list.messages.length>0">{{list.messages.length || 0}}</view> -->
		</view>
	</view>
</template>

<script>
		import GoEasy from '@/lib/goeasy-2.4.6.min.js';
	export default {
		data() {
			return {
				list:[],
				user:'',
			}
		},
		created() {
			this.getEasy();
		},

		methods: {
			getEasy(){
			this.user=uni.getStorageSync('user')
			
			console.log('this.user',this.user) 
				var that = this;
				const goEasy = GoEasy.getInstance({
					host: "hangzhou.goeasy.io",
					appkey: "BC-08f64abe98b4429fa4bb0345eee146de",
					allowNotification: true,
					modules: ['pubsub'],
				});
				goEasy.connect({
					onSuccess: function() {},
					onFailed: function(error) {
						console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error.content);
					},
					onProgress: function(attempts) {
						console.log("GoEasy is connecting", attempts);
					}
				});
				goEasy.pubsub.history({
					channel: that.user.id, //必需项
					start: new Date(new Date(new Date().toLocaleDateString()).getTime()), //可选项，开始时间，默认为0，即从第一条消息开始查
					end: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -
						1), //可选项，结束时间,默认为当前时间
					limit: 10, //可选项，返回的消息条数，默认为10条，最多30条
					onSuccess: function(response) {
						var list = JSON.stringify(response.content)
						that.list = JSON.parse(list)
					
					},
					onFailed: function(error) { //获取失败
						console.log("Failed to obtain history, code:" + error.code + ",error:" + error.content);
					},
				});
			},
			change_nav(index) {
				
				this.$emit('change_nav', index)
				 this.getEasy();
			},
			item_width(index) {
				
				let length = this.$store.state.footer_store.footer_nav.length;
				if (index == Math.floor(length / 2)) {
					return "25%";
				}
				switch (length) {
					case 1:
						return '100%'
						break;
					case 2:
						return '50%'
						break;
					case 3:
						return '33.3%'
						break;
					case 4:
						return '25%'
						break;
					case 5:
						return '18.75%'
						break;
					default:
						break;
				}
			},
		},
		computed: {
			footer_nav() {
				return this.$store.state.footer_store.footer_nav
			},
			now_index() {
				return this.$store.state.footer_store.now_page_index;
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-footer;
		color: $uni-text-color;

		.active {
			color: $uni-text-color-active;
		}
	}
	.circle{
		width: 40rpx;
		height: 40rpx;
		 position: absolute;
		  right: 5%;
		 top: 5%; 
		 text-align: center;
		border-radius: 50%;
		background-color: #FF0000;
		color: #fff;
		
	}
	.footer_item {
		position: relative;
		float: left;
		text-align: center;
		font-size: 28rpx;
		height: 120rpx;
	}

	.footer_item image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
	}

	.footer_item.big_item {
		position: relative;
		top: -60rpx;
	}

	.footer_item.big_item image {
		padding: 5rpx 10rpx;
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
		background-color: #FFFFFF;
	}
</style>
